<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 学科名称input -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="活动名称">
            <el-input
              style="width: 200px"
              v-model="form.subjectName"
            ></el-input>
            <el-button size="small" style="margin-left: 10px" @click="clearForm"
              >清除</el-button
            >
            <el-button size="small" type="primary" @click="search"
              >搜索</el-button
            >
            <!-- 新增学科按钮 -->
            <el-button
              size="small"
              style="float: right"
              type="success"
              icon="el-icon-edit"
              @click="dialogVisible = true"
              >新增学科</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          :title="`数据一${counts}共条`"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>
        <!-- 数据表格 -->
        <el-table
          :data="list"
          stripe
          class="dataTable"
          :header-cell-style="{
            background: '#fafafa',
            color: '#909399',
            'border-bottom': '3px #e8e8e8 solid'
          }"
        >
          <el-table-column prop="data" label="序号">
            <template v-slot="scope">
              {{ scope.$index + (q.page - 1) * q.pagesize + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column
          ><el-table-column
            prop="addDate"
            label="创建时间"
            :formatter="dateFormat"
            width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            width="120px"
          >
            <template slot-scope="scope">
              {{ scope.row.isFrontDisplay ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录">
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column label="操作" width="250px">
            <template v-slot="scope">
              <el-link
                style="margin-right: 10px"
                :underline="false"
                type="primary"
                >学科分类</el-link
              >
              <el-link
                style="margin-right: 10px"
                :underline="false"
                type="primary"
                >学科标签</el-link
              >
              <el-link
                style="margin-right: 10px"
                :underline="false"
                type="primary"
                @click="amend(scope.row)"
                >修改</el-link
              >
              <el-link
                style="margin-right: 10px"
                :underline="false"
                type="primary"
                @click="delsub(scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 25px; text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="10"
        layout="prev, pager, next,sizes, jumper"
        :total="counts"
      >
      </el-pagination>
      <!-- 新增学科弹出层 -->
      <el-dialog
        title="新增学科"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <!-- 校验表单 -->
        <el-form
          :model="addname"
          :rules="addrules"
          ref="addname"
          label-width="100px"
          class="demo-addname"
        >
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="addname.subjectName"></el-input>
          </el-form-item>
          <!-- 是否显示 -->
          <el-form-item label="是否显示" prop="isFrontDisplay">
            <el-switch
              v-model="addname.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addsub">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改弹出层 -->
      <el-dialog
        title="提示"
        :visible.sync="amendVisible"
        width="30%"
        :before-close="handleClose"
      >
        <!-- 校验表单 -->
        <el-form
          :model="amendname"
          :rules="amendrules"
          ref="amendname"
          label-width="100px"
          class="demo-addname"
        >
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="amendname.subjectName"></el-input>
          </el-form-item>
          <!-- 是否显示 -->
          <el-form-item label="是否显示" prop="isFrontDisplay">
            <el-switch
              v-model="amendname.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="amendVisible = false">取 消</el-button>
          <el-button type="primary">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, add, remove } from '@/api/hmmm/subjects'
import moment from 'moment'

export default {
  name: 'Subjects',
  created () {
    this.getlist()
  },
  data () {
    return {
      form: {
        subjectName: ''
      },
      input: '',
      // 表单校验
      addname: {
        subjectName: '',
        isFrontDisplay: ''
      },
      // 表单校验规则
      addrules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ],
        isFrontDisplay: [
          { required: true, message: '是否显示', trigger: 'blur' }
        ]
      },
      // 修改表单校验
      amendname: {
        subjectName: '',
        isFrontDisplay: ''
      },
      // 表单校验规则
      amendrules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ],
        isFrontDisplay: [
          { required: false, message: '是否显示', trigger: 'blur' }
        ]
      },
      currentPage4: 4,
      list: [],
      subjectArr: [],
      // 分页
      q: {
        subjectName: '',
        page: 1, // 当前第几页
        pagesize: 10
      },
      // 弹出层
      dialogVisible: false,
      // 总共数据
      counts: 0,
      // 修改弹出层
      amendVisible: false
    }
  },

  mounted () {},

  methods: {
    // 清除
    clearForm () {
      this.form.subjectName = ''
    },
    // 弹窗
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 修改弹窗
    amend (row) {
      this.amendVisible = true
      this.amendname.subjectName = row.subjectName
      this.amendname.isFrontDisplay = row.isFrontDisplay

      // console.log(row)
    },
    // 分页
    handleSizeChange (val) {
      this.q.pagesize = val
      this.getlist()
      // console.log(`每页 ${val} 条`)
    },
    // 分页
    handleCurrentChange (val) {
      this.q.page = val
      this.getlist()
      // console.log(`当前页: ${val}`)
    },
    // 获取数据列表
    async getlist () {
      const { data: res } = await list(this.q)
      console.log(res)
      this.list = res.items
      this.counts = res.counts
    },
    // 添加数据
    addsub () {
      // 弹出框兜底校验
      this.$refs.addname.validate(async (valid) => {
        if (valid) {
          const res = await add(this.addname)
          this.$message({
            message: '恭喜你，添加成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.getlist()
        }
      })
    },
    // 删除数据
    delsub (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          const res = await remove(row)
          this.getlist()
          console.log(res)
        })
        .catch((e) => e)
    },
    // 搜索
    async search () {
      this.q.subjectName = this.form.subjectName
      // console.log(this.obj.subjectName)
      const res = await list()
      this.getlist()
      this.form.subjectName = ''
    },
    /* 日期处理 */
    dateFormat: function (row, column) {
      var date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin: 14px 10px;
  margin-top: 10px;
  .dataTable {
    // width: 100px;
    margin-top: 10px;
  }
}
</style>
